<template>
  <div class="productIndex" productIndex>
    <div class="title pl20 pr14">
      <div class="title-left">商品管理（区总管理）</div>
    </div>
    <div class="search-box pb10">
      <div class="pr12">商品编码： <a-input placeholder="请输入" style="width: 120px" v-model="search.productId" /></div>
      <div class="pr12">商品名称：<a-input placeholder="请输入" style="width: 240px" v-model="search.productName" /></div>
      <div>
        销售状态：
        <a-select style="width: 120px" @change="handleChange" v-model="search.saleStatus">
          <a-select-option :value="0">
            全部
          </a-select-option>
          <a-select-option :value="1">
            未售罄
          </a-select-option>
          <a-select-option :value="2">
            售罄
          </a-select-option>
        </a-select>
      </div>

      <div class="search-box-btn">
        <a-button type="link" @click="reset">重置</a-button>
        <a-button @click="handlesearch" type="primary">筛选</a-button>
      </div>
    </div>
    <div class=" main-body ml20 mt10 mr14 mb19 " ref="mainBody">
      <a-table :columns="columns" :data-source="data" :loading="loading" :pagination="pagination" @change="paginationChange" :scroll="{ x: 500, y: tableHeight }">
        <template slot="name" slot-scope="text, record">
          <div class="product-info pl14">
            <div class="mr10"><img :src="record.faceImg" alt="" /></div>
            <div>
              <div>{{ text }}</div>
              <div>编码：{{ record.id }}</div>
              <div>品类：{{ record.productCategory }}</div>
              <div>发码：{{ record.thirdName }}</div>
            </div>
          </div>
        </template>
        <template slot="pmName" slot-scope="text, record">
          <p v-if="record.pmName">
            {{ record.pmName | handleData }}/{{ record.pmPhone | handleData }}
            <!-- /{{ pmCompanyName }} -->
            <a-tag v-if="record.pmStatus === 3">
              已离职
            </a-tag>
          </p>
          <p v-if="record.editUserName">
            {{ record.editUserName | handleData }}/{{ record.editPhone | handleData }}
            <a-tag v-if="record.editStatus === 3">
              已离职
            </a-tag>
          </p>
          <p v-if="record.designer">
            {{ record.designer | handleData }}/{{ record.designerPhone | handleData }}
            <a-tag v-if="record.designerStatus === 3">
              已离职
            </a-tag>
          </p>
        </template>
        <template slot="subTitle" slot-scope="text, record">
          <div v-if="record.productItems.length > 0" class="pl14">
            <div v-for="(item, i) in record.productItems" :key="i" class="item-br item-no-pl">
              <div class="item-nothing" :title="item.subTitle">
                {{ item.subTitle }}
              </div>
            </div>
          </div>
          <div v-else class="item-br item-nothing">无</div>
        </template>

        <template slot="productItemsIds" slot-scope="text, record">
          <div v-if="record.productItems.length > 0">
            <div v-for="(item, i) in record.productItems" :key="i" class="item-br item-no-pl">
              <div class="item-nothing">
                {{ item.productItemId }}
              </div>
            </div>
          </div>
          <div v-else class="item-br item-nothing">无</div>
        </template>

        <template slot="superFirstMoney" slot-scope="text, record">
          <div v-if="record.productItems.length > 0">
            <div v-for="(item, i) in record.productItems" :key="i" class="item-br">
              <div class="pt13 pb17">
                <span>大/中/小</span> <span style="display: block;">{{ item.superFirstMoney || '0' }}/{{ item.firstMoney || '0' }}/{{ item.secondMoney || '0' }}</span>
              </div>
            </div>
          </div>
          <div v-else class="item-br item-nothing">无</div>
        </template>
        <template slot="salePrice" slot-scope="text, record">
          <div v-if="record.productItems.length > 0">
            <div v-for="(item, i) in record.productItems" :key="i" class="item-br">
              <div class="pt3 pb7">
                <span class="del-line">原价：{{ item.originPrice }}</span>
                <span style="display: block;">售价：{{ item.salePrice }}</span> <span style="display: block;">结算：{{ item.settlePrice }}</span>
              </div>
            </div>
          </div>
          <div v-else class="item-br item-nothing">无</div>
        </template>
        <template slot="codeAmount" slot-scope="text, record">
          <div v-if="record.productItems.length > 0">
            <div v-for="(item, i) in record.productItems" :key="i" class="item-br">
              <div class="item-nothing">
                {{ item.codeAmount }}
              </div>
            </div>
          </div>
          <div v-else class="item-br item-nothing">无</div>
        </template>

        <template slot="zeroReplaceAmount" slot-scope="text, record">
          <div v-if="record.productItems.length > 0">
            <div v-for="(item, i) in record.productItems" :key="i" class="item-br ">
              <div class="item-nothing">
                {{ item.zeroReplaceAmount }}
              </div>
            </div>
          </div>
          <div v-else class="item-br item-nothing">无</div>
        </template>
        <template slot="usedAmount" slot-scope="text, record">
          <div v-if="record.productItems.length > 0">
            <div v-for="(item, i) in record.productItems" :key="i" class="item-br">
              <div class="item-nothing">
                {{ item.usedAmount || '无' }}
              </div>
            </div>
          </div>
          <div v-else class="item-br item-nothing">无</div>
        </template>
        <template slot="stockAmount" slot-scope="text, record">
          <div v-if="record.productItems.length > 0">
            <div v-for="(item, i) in record.productItems" :key="i" class="item-br">
              <div class="item-nothing">
                {{ item.stockAmount || '共享库存' }}
              </div>
            </div>
          </div>
          <div v-else class="item-br item-nothing">无</div>
        </template>
        <template slot="saleAmount" slot-scope="text, record">
          <div v-if="record.productItems.length > 0">
            <div v-for="(item, i) in record.productItems" :key="i" class="item-br">
              <div class="item-nothing">
                {{ item.saleAmount }}
              </div>
            </div>
          </div>
          <div v-else class="item-br item-nothing">无</div>
        </template>
        <template slot="refundAmount" slot-scope="text, record">
          <div v-if="record.productItems.length > 0" class="mr14">
            <div v-for="(item, i) in record.productItems" :key="i" class="item-br">
              <div class="item-nothing">
                {{ item.refundAmount || '无' }}
              </div>
            </div>
          </div>
          <div v-else class="item-br item-nothing">无</div>
        </template>
        <template slot="time" slot-scope="text, record">
          <div class="ml14">
            <div>上线时间：{{ record.releaseTime || '无' }}</div>
            <!-- <div>售卖截止：{{ record.endTime || '无' }}</div> -->
            <div>有效期开始：{{ record.validBeginDate || '无' }}</div>
            <div>有效期结束：{{ record.validEndDate || '无' }}</div>
          </div>
        </template>
        <template slot="status" slot-scope="text, record">
          <div class="ml14">
            <a-tag style="margin-left:8px" v-if="record.status === 1" color="green">
              已上架
            </a-tag>
            <a-tag style="margin-left:8px" v-else-if="record.status === 0" color="blue">
              待审核
            </a-tag>
            <!-- -1 待上架 -->
            <a-tag style="margin-left:8px" v-if="record.status === -1" color="blue">
              待上架
            </a-tag>
            <a-tag style="margin-left:8px" v-if="record.status === 2" color="red">
              已拒绝
            </a-tag>
            <a-tag style="margin-left:8px" v-else-if="record.status === 3">
              已下架
            </a-tag>
          </div>
        </template>

        <template slot="stockAmount1" slot-scope="text">
          <div class="ml14">
            {{ text }}
          </div>
        </template>
        <template slot="saleAmount1" slot-scope="text">
          <div class="ml14">
            {{ text }}
          </div>
        </template>

        <template slot="aciotn" slot-scope="text, record">
          <!-- <a-button type="link" @click="goto(record)">编辑</a-button> -->
          <a-button type="link" @click.stop="viewDetails(record)">详情</a-button>
          <span v-if="record.auditInfo && record.auditInfo.auditStatus != 3">
            <a-button type="link" @click="Offline(record)" v-if="record.auditInfo && record.auditInfo.auditStatus == 1">下架</a-button>
          </span>
        </template>
      </a-table>
    </div>

    <!-- <a-pagination v-model="search.pageIndex" :total="total" show-less-items /> -->
    <a-modal :footer="null" :getContainer="() => $refs.mainBody" :visible="viewDetailsModal" :width="1100" @cancel="viewDetailsModal = false">
      <template slot="title">
        <span style="font-size:22px;">{{ viewDetailsModalRecord.locationName }}</span>
        <a-tag style="margin-left:8px" v-if="viewDetailsModalRecord.hasSoldOut === 1" color="orange">
          售罄
        </a-tag>
        <a-tag style="margin-left:8px" v-else-if="viewDetailsModalRecord.hasSoldOut === 0" color="cyan">
          未售罄
        </a-tag>
      </template>
      <div class="detailModal">
        <div>
          <div class="top">
            <div>
              <title-box>名称/品类</title-box>
              <p style="margin-top:20px">产品名称：{{ viewDetailsModalRecord.productTitle | handleData }}</p>
              <p>商家名称：{{ viewDetailsModalRecord.shopsName | handleData }}</p>
              <p>产品品类：{{ viewDetailsModalRecord.productCategory | handleData }}</p>
            </div>
            <div>
              <title-box>人员</title-box>
              <p style="margin-top:20px">
                产品经理：{{ viewDetailsModalRecord.pmName | handleData }}/{{ viewDetailsModalRecord.pmPhone | handleData }} /{{ pmCompanyName | handleData }}
                <a-tag v-if="viewDetailsModalRecord.pmStatus === 3">
                  已离职
                </a-tag>
              </p>

              <!-- <p>
                文案编辑：{{ viewDetailsModalRecord.editUserName | handleData }}/{{ viewDetailsModalRecord.editPhone | handleData }}
                <a-tag v-if="viewDetailsModalRecord.editStatus === 3">
                  已离职
                </a-tag>
              </p>
              <p>
                设计人员：{{ viewDetailsModalRecord.designer | handleData }}/{{ viewDetailsModalRecord.designerPhone | handleData }}
                <a-tag v-if="viewDetailsModalRecord.designerStatus === 3">
                  已离职
                </a-tag>
              </p> -->
            </div>
          </div>
          <div class="top">
            <div>
              <title-box>时间</title-box>
              <p style="margin-top:20px">上线时间：{{ viewDetailsModalRecord.releaseTime }}</p>
              <!-- <p>售卖截止：{{ viewDetailsModalRecord.endTime }}</p> -->
              <p>有效期开始：{{ viewDetailsModalRecord.validBeginDate }}</p>
              <p>有效期结束：{{ viewDetailsModalRecord.validEndDate }}</p>
            </div>
            <div>
              <title-box>上线站点</title-box>
              <p style="margin-top:20px">
                {{ viewDetailsModalRecord.releaseLocations }}
              </p>
            </div>
          </div>

          <div>
            <title-box>数量</title-box>
          </div>

          <div style="margin-top:20px" class="top">
            <div>
              <!-- <p>初始销量:{{ viewDetailsModalRecord.baseAmount | handleData }}</p> -->
              <!-- <p>商城销量:{{ viewDetailsModalRecord.saleAmount | handleData }}</p> -->
              <!-- <p>渠道库存:{{ viewDetailsModalRecord.channelStock | handleData }}</p> -->
              <p>总核销量：{{ viewDetailsModalRecord.completeAmount | handleData }}</p>
              <p>总退款量：{{ viewDetailsModalRecord.refundAmount | handleData }}</p>
            </div>
            <div>
              <!-- <p>商家报量：{{ viewDetailsModalRecord.businessReportNums | handleData }}</p> -->
              <p>实际总销量：{{ viewDetailsModalRecord.saleAmount | handleData }}</p>
              <!-- <p>渠道销量:{{ viewDetailsModalRecord.channelSaleAmount | handleData }}</p> -->
              <p>总库存：{{ viewDetailsModalRecord.totalStocks | handleData }}</p>
              <p>剩余库存：{{ viewDetailsModalRecord.surplusStocks | handleData }}</p>
              <!-- <p>合作次数：{{ viewDetailsModalRecord.cooperationCount }}</p> -->
              <!-- <p>请款量：{{ record.requestAmount | handleData }}</p> -->
            </div>
          </div>
          <div>
            <div>
              <title-box>地址</title-box>
              <p style="margin-top:20px">
                推广地址：<a :href="viewDetailsUrl">{{ viewDetailsUrl | handleData }}</a>
              </p>
              <p>
                推文地址：<a :href="viewPushUrl">{{ viewPushUrl | handleData }}</a>
              </p>
            </div>
          </div>
        </div>

        <div>
          <div class="qrcode" ref="qrCodeUrl"></div>
          <p style="font-size: 12px;">请使用微信扫描二维码预览</p>
        </div>
      </div>
      <a-table rowKey="id" :loading="initLoading" :columns="innerColumns" :dataSource="productItemDetailList" :pagination="false" v-if="productItemDetailList.length > 0">
        <template slot="subTitle" slot-scope="text, row">
          <p>套餐名称：{{ row.subTitle | handleData }}</p>
          <p>套餐ID：{{ row.productItemId | handleData }}</p>
          <!-- <p>渠道结算价：{{ row.channelPrice | handleData }}</p> -->
        </template>

        <template slot="number" slot-scope="text, row">
          <div class="flexDiv">
            <div>
              <p v-if="viewDetailsModalRecord.itemStock">库存：{{ row.stockAmount | handleData }}</p>
              <p>单次/最大购买量：{{ row.singleMax | handleData }}</p>
              <p>线上实际销量：{{ row.saleAmount | handleData }}</p>
              <p>线上退款量：{{ row.refundAmount | handleData }}</p>
              <!-- <p>线上留单量：{{ row.onlineReservation | handleData }}</p> -->
              <p>商家核销量：{{ row.usedAmount | handleData }}</p>
              <p>置换数量：{{ row.zeroReplaceAmount || 0 }}</p>
            </div>
            <div>
              <p v-if="viewDetailsModalRecord.itemStock">剩余库存：{{ row.surplusStocks | handleData }}</p>
              <p>发码数量：{{ row.codeAmount | handleData }}</p>
              <!-- <p>线下实际导单量：{{ row.offlineRealSales | handleData }}</p> -->
              <!-- <p>线下留单量：{{ row.offlineReservation | handleData }}</p> -->
              <!-- <p>线下退款量：{{ row.offlineRefundAmount | handleData }}</p> -->
              <!-- <p>商城销量：{{ row.mallSalesWithProduct | handleData }}</p> -->
              <!-- <p>报量：{{ row.forShopsSales }}</p> -->
              <!-- <p>请款量：{{ row.completeAmount | handleData }}</p> -->
            </div>
          </div>
        </template>
        <template slot="price" slot-scope="text, row">
          <p>售价：{{ row.salePrice | handleData }}</p>
          <p>原价：{{ row.originPrice | handleData }}</p>
          <p>商家结算价：{{ row.settlePrice | handleData }}</p>
          <!-- <p>渠道结算价：{{ row.channelPrice | handleData }}</p> -->
        </template>
        <template slot="talentOfSmallYuan" slot-scope="text, row">
          <p>大达人佣金：{{ row.superFirstMoney | handleData }}</p>
          <p>中达人佣金：{{ row.firstMoney | handleData }}</p>
          <p>小达人佣金：{{ row.secondMoney | handleData }}</p>
        </template>
        <template slot="channelPrice" slot-scope="text, row">
          <span v-if="viewDetailsModalRecord.itemMoney === 0">{{ (row.sellPriceYuan - viewDetailsModalRecord.talentOfMiddleYuan - viewDetailsModalRecord.talentOfSmallYuan).toFixed(2) }}</span>
          <span v-else>{{ (row.sellPriceYuan - row.talentOfMiddleYuan - row.talentOfSmallYuan).toFixed(2) }} </span>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>

<script>
import titleBox from './components/detailsTitle'
import QRCode from 'qrcodejs2'
import { getDouyiRegionAdminList, getShareUrl, companyWithUser, updateDouyiofflineRelease, auditDouyinproduct } from '@/service'
import { mscf } from '@/util'
import { dateFormat } from 'nearby-common'
const columns = [
  {
    title: '商品信息',
    dataIndex: 'productTitle',
    key: 'productTitle',
    width: 360,
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '人员',
    dataIndex: 'pmName',
    key: 'pmName',
    width: 180,
    scopedSlots: { customRender: 'pmName' }
  },
  {
    title: '套餐名称',
    dataIndex: 'productItems',
    key: 'subTitle',
    width: 200,
    scopedSlots: { customRender: 'subTitle' }
  },
  {
    title: '套餐ID',
    dataIndex: 'productItemsIds',
    key: 'productItemsIds',
    width: 100,
    scopedSlots: { customRender: 'productItemsIds' }
  },
  {
    title: '佣金',
    dataIndex: 'productItems',
    key: 'superFirstMoney',
    width: 90,
    scopedSlots: { customRender: 'superFirstMoney' }
  },
  {
    title: '价格(元)',
    dataIndex: 'productItems',
    key: 'salePrice',
    width: 150,
    scopedSlots: { customRender: 'salePrice' }
  },
  {
    title: '库存',
    dataIndex: 'productItems',
    key: 'stockAmount',
    width: 80,
    scopedSlots: { customRender: 'stockAmount' }
  },
  {
    title: '发码个数',
    dataIndex: 'productItems',
    key: 'codeAmount',
    width: 90,
    scopedSlots: { customRender: 'codeAmount' }
  },
  {
    title: '置换量',
    dataIndex: 'productItems',
    key: 'zeroReplaceAmount',
    width: 80,
    scopedSlots: { customRender: 'zeroReplaceAmount' }
  },
  {
    title: '套餐销量',
    dataIndex: 'productItems',
    key: 'saleAmount',
    width: 90,
    scopedSlots: { customRender: 'saleAmount' }
  },
  {
    title: '套餐核销量',
    dataIndex: 'productItems',
    key: 'usedAmount',
    width: 100,
    scopedSlots: { customRender: 'usedAmount' }
  },
  {
    title: '套餐退款量',
    dataIndex: 'productItems',
    key: 'refundAmount',
    width: 100,
    scopedSlots: { customRender: 'refundAmount' }
  },
  {
    title: '总库存',
    dataIndex: 'stockAmount',
    key: 'stockAmount1',
    width: 80,
    scopedSlots: { customRender: 'stockAmount1' }
  },
  {
    title: '总销量',
    dataIndex: 'saleAmount',
    key: 'saleAmount1',
    width: 80,
    scopedSlots: { customRender: 'saleAmount1' }
  },
  {
    title: '时间',
    dataIndex: 'releaseTime',
    key: 'releaseTime',
    width: 188,
    scopedSlots: { customRender: 'time' }
  },
  {
    title: '状态',
    dataIndex: 'statusDesc',
    key: 'statusDesc',
    width: 100,
    scopedSlots: { customRender: 'status' }
  },

  {
    title: '操作',
    dataIndex: 'aciotn',
    key: 'aciotn',
    fixed: 'right',
    width: 100,
    scopedSlots: { customRender: 'aciotn' }
  }
]
export default {
  name: 'dcAdminProductIndex',
  components: { titleBox },
  data() {
    return {
      loading: false,
      viewDetailsModal: false,
      viewDetailsModalRecord: {},
      // 查PM所属公司
      pmCompanyName: undefined,
      // 详情二维码url
      detailUrl: '',
      id: null,
      checkedList: [],
      selectLocationIdList: [],
      spinning: false,
      nationalModal: false,
      columns,
      dateFormat,
      data: [],
      search: {
        productId: null,
        productName: null,
        saleStatus: 0,
        pageIndex: 1,
        pageSize: 10
      },
      pagination: {},
      productItemDetailList: [],
      viewDetailsUrl: '',
      viewPushUrl: '',
      initLoading: false,
      innerColumns: [
        {
          title: '套餐名称',
          width: 140,
          dataIndex: 'subTitle',
          scopedSlots: {
            customRender: 'subTitle'
          }
        },
        {
          title: '数量',
          width: 180,
          dataIndex: 'singleMax',

          scopedSlots: {
            customRender: 'number'
          }
        },
        {
          title: '价格',
          width: 140,
          dataIndex: 'price',
          scopedSlots: {
            customRender: 'price'
          }
        },
        {
          title: '达人佣金',
          width: 170,
          dataIndex: 'firstMoney',
          scopedSlots: {
            customRender: 'talentOfSmallYuan'
          }
        }
      ]
    }
  },
  created() {
    this.init(this.search)
  },
  methods: {
    async init(search) {
      this.loading = true
      let data = await getDouyiRegionAdminList(search)
      this.data = data.records
      let { rowCount } = data
      this.pagination = {
        ...this.pagination,
        total: rowCount
      }
      this.loading = false
      console.log(this.pagination)
    },
    handleChange() {},
    handlesearch() {
      this.init(this.search)
    },
    reset() {
      this.search = {
        productId: null,
        productName: null,
        saleStatus: 0
      }
      this.init(this.search)
    },
    paginationChange(pagination) {
      console.log(pagination)

      const pager = { ...this.pagination }
      pager.current = pagination.current
      this.pagination = pager
      this.search.pageIndex = pagination.current
      this.init(this.search)
    },
    goto(record) {
      let id = record ? record.id : null
      mscf.emit('openNewSystem', '*', {
        target: 'product',
        page: 'productInfoToyBox',
        params: {},
        query: {
          id: id,
          activeKey: 1,
          breadCrumbs: this.$route.matched[this.$route.matched.length - 1].path,
          _r: (Math.random() * 100).toFixed(0)
        }
      })
    },
    creatQrCode(text) {
      if (this.$refs.qrCodeUrl.childNodes.length) {
        let el = this.$refs.qrCodeUrl
        let childs = el.childNodes
        for (let i = childs.length - 1; i >= 0; i--) {
          el.removeChild(childs[i])
        }
      }

      let qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: text, // 需要转换为二维码的内容
        width: 145,
        height: 145,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
      console.log(qrcode)
    },
    expand(record) {
      // this.productId = record.id
      this.productItemDetailList = []
      // this.expandedRowKeys = expanded ? [record.id] : []
      this.initLoading = true
      // if (expanded) {
      getDouyiRegionAdminList({
        productId: record.id,
        locationId: this.search.locationId || null
      })
        .then((res) => {
          this.productItemDetailList = res.records[0].productItems
          console.log(this.productItemDetailList)
        })
        .finally(() => {
          this.initLoading = false
        })
      //  }
    },
    viewDetails(record) {
      this.viewDetailsModalRecord = record
      this.expand(record)
      getShareUrl({ productId: record.id }).then((res) => {
        this.creatQrCode(res.url)
        this.viewDetailsUrl = res.url
        this.viewPushUrl = res.pushUrl
      })
      companyWithUser({ userId: record.pmUserId }).then((res) => {
        if (res.length) {
          this.pmCompanyName = res[0].name
        }
      })
      this.viewDetailsModal = true
    },
    async Offline({ id }) {
      await updateDouyiofflineRelease({ id })
      await this.init()
      this.$messageSend.success('下架成功！')
    },
    adopt({ productTitle, id }) {
      let _this = this
      const h = this.$createElement
      this.$confirm({
        title: `是否通过  ${productTitle}  产品上架?`,
        // content: (h) => {
        //   return h('p', `是否通过  ${productTitle}  产品上架`)
        // },
        onOk: async (v) => {
          await auditDouyinproduct({ productId: id, auditStatus: 1 })
          await _this.init()
          _this.$messageSend.success('成功！')
          v()
        },
        onCancel() {
          console.log('Cancel')
        },
        class: 'test'
      })
    },
    refuse({ productTitle, id }) {
      let _this = this
      const h = this.$createElement
      this.$confirm({
        title: `是否拒绝  ${productTitle}  产品上架?`,
        // content: (h) => {
        //   return h('p', `是否通过  ${productTitle}  产品上架`)
        // },
        okType: 'danger',
        onOk: async (v) => {
          await auditDouyinproduct({ productId: id, auditStatus: 2 })
          await _this.init()
          _this.$messageSend.success('成功！')
          v()
        },
        onCancel() {
          console.log('Cancel')
        },
        class: 'test'
      })
    }
  }
}
</script>

<style lang="less" scoped>
.productIndex {
  height: calc(100% - 10px);
  // overflow: auto;
  margin-bottom: 10px;
  border-radius: 10px;
  background: #fff;
  padding: 0 14px 0 20px;
  .title {
    // width: 100%;
    display: flex;
    // text-align: center;
    align-items: center;
    height: 64px;
    .title-left {
      font-size: 18px;
      color: #333333;
      font-weight: 500;
    }
    .title-btn {
      flex: 1;
      text-align: right;
    }
  }
  .search-box {
    height: 60px;
    background: #fafafa;
    border-radius: 2px;
    border: 1px solid #f0f0f0;
    padding: 0 14px;
    display: flex;
    align-items: center;
    .search-box-btn {
      flex: 1;
      text-align: right;
    }
  }
  .item-br {
    border-bottom: 1px solid #f0f0f0;
    padding: 0px 0 0px 14px;
    margin-top: 5px;
    // line-height: 75px;
    height: 75px;
    // padding-left: 10px;
  }
  .item-br:last-child {
    border-bottom: none;
  }
  .item-no-pl {
    padding-left: 0;
  }
  .del-line {
    text-decoration: line-through;
  }
  .item-nothing {
    margin-top: 0;
    line-height: 75px;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    // z-index: 9999;
    // word-wrap: break-word;
    // word-break: break-all;
  }
  .product-info {
    display: flex;
    align-items: center;
    img {
      width: 80px;
      height: 80px;
      border-radius: 8px;
      background-size: contain;
    }
  }
  .qrcode {
    display: inline-block;
    img {
      width: 132px;
      height: 132px;
      background-color: #fff; //设置白色背景色
      padding: 6px; // 利用padding的特性，挤出白边

      box-sizing: border-box;
    }
  }
  .detailModal {
    display: flex;
    justify-content: space-between;
    .top {
      display: flex;
      width: 100%;
      justify-content: space-between;
      div {
        width: 350px;
      }
      div:nth-of-type(2) {
        margin-left: 120px;
      }
    }
  }
}
</style>
<style lang="scss">
.productIndex {
  .main-body {
    margin-top: 10px;
    .ant-table {
      .ant-table-content {
        .ant-table-body,
        .ant-table-fixed-right {
          table > .ant-table-tbody > tr > td {
            padding: 3px 0 !important;
            color: #333333;
          }
        }
      }
    }
  }
  .main-body .ant-table-thead .ant-table-row-cell-break-word {
    background: none;
  }
}
.productIndex {
  .main-body {
    .ant-table-thead > tr > th {
      padding: 14px;
    }
  }
}
</style>
